<template>
  <div id="ezuikit-player" style="width: 100%; height: 100%;"></div>
</template>

<script setup lang="ts">
import {inject, onMounted, ref, watchEffect} from 'vue';
import EZUIKit from "ezuikit-js/ezuikit";

const player = ref(null);
const token = ref(''); // 用于存储动态获取的accessToken
const $http = inject("$axios")
// 动态获取accessToken的方法
const getEZVIZToken = () => {
  let params = new URLSearchParams();
  params.append("appKey", "0aaa99bda1984e3797f2635d8bd5d283");
  params.append("appSecret", "9e3e449e87b8d3dffdbc7b5e30b1845a");

  // 这里假设this.$http是您项目中配置好的HTTP请求方法
  $http.post("https://open.ys7.com/api/lapp/token/get", params)
      .then(res => {
        token.value = res.data.data.accessToken; // 将获取到的accessToken存储在token变量中
        console.log(res);
        if (!player.value) {
          initializePlayer(); // 如果播放器尚未初始化，则进行初始化
        }
      })
      .catch(error => {
        console.error("err:", error);
      });
};

// 初始化播放器的方法
const initializePlayer = () => {
  player.value = new EZUIKit.EZUIKitPlayer({
    id: 'ezuikit-player',
    url: 'ezopen://open.ys7.com/AB9831171/1.hd.live',
    accessToken: token.value, // 使用动态获取的accessToken
    template: 'simple'
  });
};

onMounted(() => {
  getEZVIZToken(); // 组件挂载时调用getEZVIZToken方法获取accessToken
});

// 监听token的变化，如果token变化且播放器未初始化，则初始化播放器
watchEffect(() => {
  if (token.value && !player.value) {
    initializePlayer();
  }
});
</script>

<style scoped>
/* 这里可以添加组件的样式 */
</style>